<template>
  <el-dialog title="新增部门" :visible="showDialog" @close="cancelDialog">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="姓名" prop="username">
        <el-input
          v-model="form.username"
          placeholder="不能超过五个字"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.timeOfEntry"
            style="width: 100%;"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select
          v-model="form.formOfEmployment"
          placeholder="请选择"
          style="width:100%;"
        >
          <el-option
            v-for="item in hireType"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="form.workNumber"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input
          v-model="form.departmentName"
          @focus="showTreeData"
          autcompletel="off"
          @blur="handleBlur"
        ></el-input>
        <!-- 放一个tree来显示部门 -->
        <el-tree
          v-if="treeShow"
          v-loading="treeLoading"
          default-expand-all
          :data="departments"
          :props="defaultProps"
          @node-click="nodeClick"
        >
        </el-tree>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-col :span="11">
          <el-date-picker
            style="width: 100%;"
            type="date"
            placeholder="选择日期"
            v-model="form.correctionTime"
          ></el-date-picker>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog">取消</el-button>
      <el-button @click="save" type="primary">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
//获取部门接口
import { getzuzhi } from '@/api/zuzhi'
//导入添加员工接口
import { addEmp } from '@/api/yuangong'
//导入工具函数
import { transToTreeData } from '@/utils'
//导入枚举库
// import enumObj from '@/api/constant/employees'
import { validUsername } from '@/utils/validate'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      hireType: enumObj.hireType,
      form: {
        username: '', //名字
        mobile: '', //手机号
        timeOfEntry: '', //入职时间
        formOfEmployment: '', //聘用形式
        workNumber: '', //工号
        departmentName: '', //部门
        correctionTime: '' //转正日期
      },
      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '2-4个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { len: 11, message: '请输入11位的手机号', trigger: 'blur' }
        ],
        timeOfEntry: [
          {
            type: 'date',
            required: 'true',
            message: '请选择日期',
            trigger: 'blur'
          }
        ],
        formOfEmployment: [
          { required: 'true', message: '请选择聘用形式', trigger: 'blur' }
        ],
        workNumber: [
          { required: 'true', message: '1-20个字符', trigger: 'blur' }
        ],
        departmentName: [
          { required: 'true', message: '请选择部门', trigger: 'blur' }
        ],
        correctionTime: [
          {
            type: 'date',
            required: 'true',
            message: '请选择日期',
            trigger: 'blur'
          }
        ]
      },
      //树形控件绑定数据
      departments: [],
      //指定树的文字和子节点是神魔属性
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      //控制树形控件是否显示的属性
      treeShow: false,
      treeLoading: false
    }
  },

  methods: {
    //部门文本获得焦点事件
    async showTreeData () {
      //显示树形
      this.treeShow = true
      this.treeLoading = true
      //加载部门数据
      let res = await getzuzhi()
      this.departments = transToTreeData(res.data.depts, '')
      this.treeLoading = false
    },
    // 参数1：被点的这个节点的数据
    // 参数2: 被点的这个节点对象
    // 参数3: 被点的这个节点所在的tree组件对象
    nodeClick (data, node, tree) {
      // 把被点的节点数据里的name赋值给文本框绑定的数据
      this.form.departmentName = data.name
      this.treeShow = false
    },
    handleBlur (e) {
      //如果失去焦点时去的不是tree,则隐藏tree
      if (e.relatedTarget.className.indexOf('el-tree-node') == -1) {
        this.treeShow = false
      }
    },
    //确定按钮点击事件
    save () {
      // 做整个表单验证
      this.$refs.form.validate(async v => {
        if (v) {
          await addEmp(this.form)
          this.$message.success('新增成功')
          //隐藏对话框
          this.$emit('update:showDialog', false)
          // 父组件刷新列表
          this.$parent.getList()
        }
      })
      console.log('submit!')
    },
    cancelDialog () {
      this.form = {
        username: '', //名字
        mobile: '', //手机号
        timeOfEntry: '', //入职时间
        formOfEmployment: '', //聘用形式
        workNumber: '', //工号
        departmentName: '', //部门
        correctionTime: '' //转正日期
      }
      //重置表单
      this.$refs.form.resetFields()
      //隐藏对话框
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style></style>
